@import '../../assets/scss/support';

.brand-popup {
  height: 100vh;
  width: 260px;
  background: #ffffff;
  position: relative;

  .brand-fixed {
    .brand-popup-header {
      height: 105px;
      box-sizing: border-box;
      padding: 59px 15px 22px 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 17px;
      color: #8e8e8e;
      border-bottom: 1px solid #e9e9e9;

      .header-item-warper {
        position: relative;

        .num {
          position: absolute;
          color: #fff;
          text-align: center;
          font-size: 12px;
          right: -15px;
          top: -5px;
          padding: 0 3px;
          min-width: 15px;
          height: 14px;
          line-height: 14px;
          background: linear-gradient(180deg, rgba(255, 116, 116, 1) 0%, rgba(248, 29, 29, 1) 100%);
          //    box-shadow: 0px 0px 6px 0px rgba(255, 49, 49, 0.5);
          border-radius: 12px;
          border: 1rpx solid rgba(255, 255, 255, 1);
        }

        .header-item {
          font-weight: 500;
          line-height: 24px;
          position: relative;

          &.active {
            color: #f62121;

            &:after {
              content: '';
              position: absolute;
              background: #f62121;
              display: block;
              left: 50%;
              top: 28px;
              width: 22px;
              height: 2px;
              border-radius: 2px;
              transform: translateX(-50%);
            }
          }
        }
      }

      .brand-close {
        height: 22px;
        width: 22px;
        background: url('%ASSETS_IMG%/s-brand-popup-close.png') no-repeat center;
        background-size: contain;
      }
    }

    .brand-search-warp {
      position: relative;
      padding: 10px 8px;
      box-sizing: border-box;
      height: 55px;

      .brand-search-input {
        border-radius: 18px;
        // width: 100%;
        height: 35px;
        background: #f4f4f4;
        color: #8e8e8e;
        font-size: 14px;
        padding: 0 35px;
      }

      &::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 24px;
        top: 19px;
        background: url('%ASSETS_IMG%/s-brand-popup-search-icon.png') no-repeat center;
        background-size: contain;
      }

      .brand-search-close {
        position: absolute;
        top: 17px;
        right: 18px;
        height: 20px;
        width: 20px;
        background: url('%ASSETS_IMG%/s-search-close@2x.png') no-repeat center;
        background-size: contain;
      }
    }
  }

  .scroller-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    align-items: center;
    overflow-y: scroll;
    box-sizing: border-box;
    position: fixed;
    top: 156px;
    bottom: 0;
    width: 260px;
    padding: 0px 8px 8px 8px;

    .brand-date-item {
      position: relative;

      .brand-update-date {
        margin-top: 5px;
        color: #afafaf;
        font-size: 16px;
        font-weight: 500;
        height: 25px;
        line-height: 25px;
        text-align: left;
      }

      .brand-item {
        display: flex;
        align-items: center;
        padding: 10px 0px;

        .brand-logo {
          border: 1px solid #f2f2f2;
          border-radius: 2px;
          box-sizing: border-box;
          width: 40px;
          height: 40px;
          margin-right: 8px;
          overflow: hidden;

        }

        .brand-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 40px;
          flex: 1;

          .brand-title-warp {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .brand-title {
              flex: 1;
              max-width: 164px;
              color: #333333;
              font-size: 15px;
              font-weight: 500;
              margin-right: 13px;
              @include textoverflow(1);
              text-align: left;
            }

            .brand-title-tips {
              width: 40px;
              height: 14px;
              line-height: 14px;
              text-align: center;
              border-radius: 2px;
              background: #ff484f;
              color: #fff;
              font-size: 10px;
            }
          }

          .brand-feature {
            text-align: left;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .products-count {
              font-size: 13px;
              color: #fc323d;
              margin-right: 13px;
            }

            .end-countdown {
              color: #747474;
              font-weight: 400 !important;

              text {
                line-height: 16px;
                color: #fc323d !important;
              }
            }
          }

        }
      }
    }
  }
}